import React, { useState, useEffect } from 'react'
import './Knowledge.css'
import { SearchBar, Tabs, Popup, Button } from 'antd-mobile'

export default function Knowledge() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const images = [
    '../bg010a.png',
    '../bg016c.png',
    '../bg017a.png',
  ];
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 3000);
    return () => clearInterval(timer);
  }, [images.length]);
  const category = [
    { icons: '../knowledge1.png', name: '高血压' },
    { icons: '../knowledge2.png', name: '糖尿病' },
    { icons: '../knowledge3.png', name: '冠心病' },
    { icons: '../knowledge4.png', name: '慢阻肺' }
  ]
  const data = [
    { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
    { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
    { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
    { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
  ]
  const [visible1, setVisible1] = useState(false)
  const cate = [
    { id: 1, name: '女性健康' },
    { id: 2, name: '心脑血管' },
    { id: 3, name: '家有儿女' },
    { id: 4, name: '防癌抗癌' },
    { id: 5, name: '心理医生' },
    { id: 6, name: '整形美容' },
  ]

  return (
    <div>
      <div className='knowledge-bg'>
        <div className="knowledge-search">
          <SearchBar placeholder='搜索医院、疾病、健康知识' style={{ width: '80%' }} />
        </div>
        <div className='knowledge-img'>
          {
            images.map((image, index) => (
              <img
                key={index}
                src={image}
                alt={`Slide ${index + 1}`}
                className={`carousel-image ${index === currentIndex ? 'active' : ''}`}
              />
            ))
          }
        </div>
        <div className="category">
          {
            category.map((item, index) => {
              return <div key={index} className='category-item'>
                <img src={item.icons} alt="" />
                <p>{item.name}</p>
              </div>
            })
          }
        </div>
        <div className="text">
          <div style={{ overflow: 'hidden' }}>
            <h2 style={{ float: 'left' }}>健康知识</h2>
            <span style={{ float: 'right', height: '60px', lineHeight: '60px', fontWeight: 'bold', marginRight: '10px' }}
              onClick={() => { setVisible1(true) }}
            >更多 &gt;</span>
            <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false)
              }}
              onClose={() => {
                setVisible1(false)
              }}
              bodyStyle={{ height: '40vh' }}
            >
              <div>
                <h2 style={{ textAlign: 'center', margin: '10px auto' }}>全部分类</h2>
                <div className='cate'>
                  {
                    cate.map((item, index) => {
                      return <div key={index} className='cate-item'>
                        <Button>{item.name}</Button>
                      </div>
                    })
                  }
                </div>
              </div>
            </Popup>
          </div>
          <div className="tabs">
            <Tabs defaultActiveKey='1'>
              <Tabs.Tab title='全部' key='1'>
                {
                  data.map((item, index) => {
                    return <div key={index} className='text-item'>
                      <img src={item.img} alt="" style={{ width: '100px', height: '100px', position: 'absolute', top: '10px', right: '10px', background: 'white' }} />
                      <div className='text-item-right'>
                        <h3>{item.title}</h3>
                        <p>{item.doctor}</p>
                        <div className='text-item-right-bottom'>
                          <span>点赞 {item.c1}</span>
                          <span>评论 {item.c2}</span>
                          <span>收藏 {item.c3}</span>
                        </div>
                      </div>
                    </div>
                  })
                }
              </Tabs.Tab>
              <Tabs.Tab title='女性健康' key='2'>
                2
              </Tabs.Tab>
              <Tabs.Tab title='心脑血管' key='3'>
                3
              </Tabs.Tab>
              <Tabs.Tab title='家有儿女' key='4'>
                4
              </Tabs.Tab>
              <Tabs.Tab title='防癌抗癌' key='5'>
                5
              </Tabs.Tab>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
